// 获取元素
var $lists = $(".box3 .lists")
var $btn = $(".box2 .btn")
var $text = $(".box2 .text")
var $textplus = $(".box2 .textplus")
getdata()
// 获取数据库中的数据 (get)
function getdata() {
  $.ajax({
    url: " http://localhost:3000/db ",
    type: "GET",
    success: function (data) {
      // console.log(data)
      // 获取的数据添加到页面上
      $lists.html(template("tem", data))
      // 添加完数据之后，点击删除---删除整个li的标签
      deleteData()
    }
  })
}
// 点击按钮获取到用户名和文本内容，然后将这些内容添加到数据库中，再从数据库中获取数据添加到页面上
// 点击按钮获取到用户名和文本内容
$btn.click(function () {
  var userName = $text.val()
  var userOpinion = $textplus.val()
  // console.log(userName)
  // console.log(userOpinion)
  // 添加一项新的数据到数据库中
  $.ajax({
    url: "http://localhost:3000/Participants",
    type: "POST",
    dataType: "json",
    data: { userName: userName, userOpinion: userOpinion },
    success: function (data) {
      // console.log(data)
      $lists.append(template("tem", { "Participants": [data] }))

      // 新增完数据之后，点击删除---删除整个li的标签
      deleteData()
    }
  })
  // 清空数据
  $text.val("")
  $textplus.val("")
})

// 定义删除数据的函数
function deleteData() {
  // console.log($(".box3 .lists .delete"))
  $(".box3 .lists .delete").click(function () {
    // 找到祖先级li标签
    $li = $(this).parents("li")
    // console.log($li)
    // 点击谁删除谁 删除的这一项li的顺序与数据库中的id的数字对应，需要找到数据库中的id
    // 因此给li标签添加一个属性就是数据库中的id数字在循环是添加是一个变量
    var index = $li.attr("ulid")
    // console.log(index)
    // 删除数据库中的此项数据（DELETE）
    $.ajax({
      url: "http://localhost:3000/Participants/" + index,
      type: "DELETE",
    })
    // 删除页面的li完整的html结构 
    $li.remove()
  })

}
